<template>
  <div id="full" class="w-full h-full flex flex-col ">
    <order-nav :back="false" @back="$router.push('/wantBuy')">
      <template #right>
        <div class="flex items-center" @click="$router.push({ path: '/chat' })">
          <van-badge class="w-35 h-33 mr-22" :content="unreadMsg">
            <img class="w-full h-full " src="~@/assets/image/c2c/Vector.png" alt="">
          </van-badge>
          <div class="font-28">{{ $t('联系卖家') }}</div>
        </div>
      </template>
    </order-nav>
    <div style="overflow-y: auto" class="flex-1 mainBackground">
      <div class="flex justify-between items-center pt-30 px-32 pb-100 mainBackground">
        <div class="mainBackground">
          <p class="font-48 c2cColor">{{ $t('等待卖家确认收款') }}</p>
          <!-- <p class="mt-16 font-24"> {{$t('此卖家95%的订单会在')}}<span style="color: #1D91FF">02</span> {{$t('分钟内完成')}}</p> -->
        </div>
        <div class="w-140 h-144">
          <otc-circle :time="time" :expireTime="expireTime" class="w-full h-full" />
        </div>
      </div>
      <div class="">
        <trade-data title="购买" :count="count" :total-price="totalPrice" :create-order-time="createOrderTime"
          :order-number="orderNumber" sell-name="钱多多爱妞商行" client-type="买家昵称" :detail="detail" :trade-method="tradeMethod">
          <template #divider>
            <van-divider class="order-msg-divider" />
          </template>
          <template #trade-title>
            <span>{{ $t('交易方式') }}</span>
          </template>
          <template #terms>
            <van-collapse v-model="activeNames">
              <van-collapse-item name="2">
                <template #title>
                  <span>{{ $t('交易条款') }}</span>
                </template>
                <van-divider />
                <p>{{ $t('敢打黑钱者，虽远逼诛！') }}</p>
                <p class="mt-20">{{ $t('急单勿拍！') }}</p>
              </van-collapse-item>
            </van-collapse>
          </template>
        </trade-data>
      </div>
    </div>
    <div class="px-40 pt-46 h-172 box-border flex font-30 mainBackground">
      <van-button class="flex-1 h-80 mr-16 rounded-2xl c2cColor tabBackground border-none" type="primary"
        @click="$router.push({ path: '/cancelOrder?order_no=' + $route.query.order_no })">{{ $t('取消订单') }}
      </van-button>
      <van-button class="flex-1 h-80 rounded-2xl tabBackground c2cColor border-none" type="primary"
        @click="$router.push({ path: '/appeal' })">{{ $t('申诉') }}
      </van-button>
    </div>
    <!--  交易成功  -->
    <!--        <trade-success/>-->
    <!--  交易成功详情  -->
    <!--        <trade-success-detail/>-->
  </div>
</template>

<script>
import { mapState } from "vuex"
import { Badge, Collapse, CollapseItem, Divider, } from "vant"
import OrderNav from "@/components/order-nav/OrderNav";
import OtcCircle from "@/components/otcCircle";
// import TradeSuccess from "@/page/c2c-trade/components/TradeSuccess";
// import TradeSuccessDetail from "@/page/c2c-trade/components/TradeSuccessDetail";
import TradeData from "@/page/c2cOrder/components/trade-data/TradeData";
import otcApi from '@/API/otc';

export default {
  name: "PaymentDetail",
  data() {
    return {
      activeNames: [],
      // 交易方式
      tradeMethod: [
        { label: this.$t('姓名'), value: this.$t('刘德华') },
        { label: this.$t('银行卡号/账号'), value: this.$t('1122 3344 5566 7788') },
        { label: this.$t('银行名称'), value: this.$t('中国工商银行') },
        { label: this.$t('开户支行'), value: this.$t('北京海淀支行') },
      ],
      detail: {},
      time: 0,
      expireTime: 0,
      timeout: null,
      unreadMsg: 0
    }
  },
  computed: {
    ...mapState('c2cBuy', ['count', 'totalPrice', 'createOrderTime', 'orderNumber'])
  },
  created() {
    this.fetchState()
    // otcApi.ctcOrderGetDetail({order_no: this.$route.query.order_no}).then(res => {
    //   this.detail = res.data
    //   this.time = this.detail.expireTimeRemain
    //   console.log(this.detail)
    // })
  },
  methods: {
    fetchState() {
      const order_no = this.$store.state.c2c.order_no
      otcApi.ctcOrderGetDetail({ order_no, language: this.$i18n.locale }).then(res => {
        const state = res.data.state / 1
        if (state === 1) { // 已付款
          // TOOD: 完成
          this.detail = res.data
          this.time = this.detail.expireTimeRemain
          this.expireTime = this.detail.expireTime * 60
          this.unreadMsg = this.detail.unreadMsg
          console.log(this.expireTime)
          if (this.timeout) {
            clearTimeout(this.timeout)
          }
          this.timeout = setTimeout(() => {
            this.fetchState()
          }, 3000)
        } else if (state == 3) { // 已成功
          // TODO 跳转到
          clearTimeout(this.timeout)
          this.$router.push('/tradeSuccessBuyer')
        } else if (state == 5) {
          clearTimeout(this.timeout)
          this.$router.push({ path: '/tradeOrderDetail', query: { back: false } })
        } else {
          console.log(this.detail)
        }
      })
    }
  },
  beforeDestroy() {
    clearTimeout(this.timeout)
  },
  components: {
    [Badge.name]: Badge,
    [Divider.name]: Divider,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    OrderNav,
    OtcCircle,
    TradeData,
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .order-msg-divider {
    margin: 48px 0;
  }
}
</style>